<template>
  <div class="container">
    <div class="back">
      <img src="../assets/image/top1.png" alt />
    </div>
    <div class="content">
      <div class="subtitle">
        <p>
          <span class="title-point"></span>
          访客登记
        </p>
        <div class="title-extra">
          <img src="../assets/image/blue-stack.png" alt />
        </div>
      </div>
      <table class="visitorlist">
        <tr class="headline">
          <th>姓名</th>
          <th>状态</th>
          <th>时间</th>
        </tr>
        <tr v-for="(item,index) in items" :key="index" class="content-line">
          <td>{{item.xm}}</td>
          <td>{{item.fx}}</td>
          <td>{{item.djsj}}</td>
        </tr>
      </table>
      <div class="line">
        <img src="../assets/image/line.png" alt />
      </div>
      <div class="visitor-chart" id="visitor-chart"></div>
    </div>
  </div>
</template>

<script>
  import https from '@/assets/js/https.js'
export default {
  name: "visitor",
  data() {
    return {
      items: [
      ]
    };
  },
  mounted() {
    this.initLine();
    this.getVisitors();
    var that=this;
    this.$mytimer.addCallBack(this,function (host) {
      if (that==host){
        that.getVisitors();
      }
    })
  },
  props: ["userId"],
  methods: {
    getVisitors() {
      let params ={"userId":this.userId}
      let self = this;
      https.fetchGet('/web/visitorRecord/list',params ).then((data) => {
        self.items = data.data.slice(0,10);
      }).catch(err=>{
                console.log(err)
              }
      )
    },
    initLine() {
      let myChart = this.$echarts.init(
        document.getElementById("visitor-chart")
      );
      let option = {};
      var ydata = [
        {
          name: "进入",
          value: 65
        },
        {
          name: "离开",
          value: 35
        }
      ];
      var color = [
        "#3d5afb",
        "#78fafd",
        "#e75fc3",
        "#f87be2",
        "#f2719a",
        "#fca4bb",
        "#f59a8f",
        "#fdb301",
        "#57e7ec",
        "#cf9ef1"
      ];
      var xdata = ["进入", "离开"];

      option = {
        color: color,
        legend: {
          orient: "vartical",
          x: "left",
          top: "20%",
          left: "60%",
          bottom: "0%",
          data: xdata,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 16,
          textStyle: {
            color: "white"
          },
          formatter: function(name) {
            return "" + name;
          }
        },
        series: [
          {
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 2, //最小的扇区角度（0 ~ 360）
            radius: ["40%", "70%"],
            center: ["30%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#15295a",
                borderWidth: 6
              }
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{d}%",
                rich: {
                  text: {
                    color: "white",
                    fontSize: 14,
                    align: "center",
                    verticalAlign: "middle",
                    padding: 8
                  },
                  value: {
                    color: "white",
                    fontSize: 16,
                    align: "center",
                    verticalAlign: "middle"
                  }
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 16
                }
              }
            },
            data: ydata
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.container {
  // border: 1px solid #3893ff;
  width: 268px;
  height: 490px;
  padding: 10px;
  position: relative;
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    height: 290px;
    /*overflow-y: auto;*/
    overflow: hidden;
    display: inline-block;
  }
}
.back {
  position: absolute;
  left: -20px;
  top: -18px;
  z-index: 0;
}
.content {
  position: relative;
  z-index: 1;
}
.headline {
  width: 268px;
  height: 29px;
  background: linear-gradient(
    rgba(105, 197, 255, 0.2) 0%,
    rgba(56, 147, 255, 0.2) 100%
  );
  color: #78daef;
  & > th:first-child{
    text-align: left;
    padding-left: 10px;
  }
}
.content-line {
  & > td {
    padding: 4px 0;
    text-align: center;
  }
  & > td:first-child {
    color: #9eb5d2;
    width: 100px;
    text-align: left;
    padding-left: 10px;
  }
  & > td:nth-child(2) {
    color: #ff0d0a;
    width: 30px;
  }
  & > td:last-child {
    color: #fdef21;
    width: 138px;
  }
}
.visitor-chart {
  position: relative;
  width: 260px;
  height: 140px;
}
</style>
